<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
    <style>
        .mobile{
            border:solid 1px #999;
            height: 500px;
            display: flex;
        }
        .mobile dl{
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column-reverse;
            flex: 1;
        }

        .mobile dl dt{
            background:  #999;
            color: #fff;
            height: 30px;
            text-align: center;
            cursor: pointer;
            line-height: 2em;
        }
        .mobile dl dd{
            display: flex;
            flex-direction: column;
        }
        .mobile dl dd a{
            border : 1px solid #fff;
            text-align: center;
            padding: 10px;
            text-align: center;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div ng-app="gg" ng-controller="ctrl">
    <form action="" method="post" class="form-horizontal" role="form">
        <div class="container">
            <div class="row">
                <div class="col-xs-4">
                    <div class="mobile">
                        <dl ng-repeat=" v in data.button ">
                            <dt>{{v.name}}</dt>
                            <dd ng-repeat="val in v.sub_button">
                                <a href="">{{val.name}}</a>
                            </dd>
                        </dl>

                    </div>
                </div>
                <div class="col-xs-8">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">编辑区</h3>
                        </div>
                        <div class="panel-body">
                            <!-- 一级菜单开始 -->

                            <div class="panel panel-default" ng-repeat="v in data.button">
                                <div class="panel-body">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">标题</label>
                                        <div class="col-sm-10">
                                            <input type="text" class="form-control" ng-model="v.name"/>
                                        </div>
                                    </div>
                                    <div class="form-group" ng-if="!v.sub_button">
                                        <label class="col-sm-2 control-label">类型</label>
                                        <div class="col-sm-10">
                                            <label class="radio-inline">
                                                <input type="radio" ng-model="v.type" value="click">
                                                关键词
                                            </label>
                                            <label class="radio-inline">
                                                <input type="radio" ng-model="v.type" value="view">
                                                网址
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group" ng-if="v.type == 'click'" ng-if="!v.sub_button">
                                        <label class="col-sm-2 control-label">关键词</label>
                                        <div class="col-sm-10">
                                                <input type="text" ng-model="v.key" value="click" class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group" ng-if="v.type == 'view'">
                                        <label class="col-sm-2 control-label">链接</label>
                                        <div class="col-sm-10">
                                            <input type="text" ng-model="v.url" value="view" class="form-control">
                                        </div>
                                    </div>

                                    <!-- 二级菜单开始 -->
                                    <div class="panel panel-default" ng-repeat="val in v.sub_button">
                                        <div class="panel-body">
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">标题</label>
                                                <div class="col-sm-10">
                                                    <input type="text" class="form-control" ng-model="val.name" />
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">类型</label>
                                                <div class="col-sm-10">
                                                    <label class="radio-inline">
                                                        <input type="radio" ng-model="val.type" value="click">
                                                        关键词
                                                    </label>
                                                    <label class="radio-inline">
                                                        <input type="radio" ng-model="val.type" value="view">
                                                        网址
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="form-group" ng-if="val.type == 'click' && !v.sub_button">
                                                <label class="col-sm-2 control-label">关键词</label>
                                                <div class="col-sm-10">
                                                    <input type="text" ng-model="val.key" value="click" class="form-control">
                                                </div>
                                            </div>
                                            <div class="form-group" ng-if="val.type == 'view'">
                                                <label class="col-sm-2 control-label">链接</label>
                                                <div class="col-sm-10">
                                                    <input type="text" ng-model="val.url" value="view" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 二级菜单结束 -->
                                    <button class="btn btn-info" type="button">添加菜单</button>

                                </div>
                            </div>

                            <!-- 一级菜单结束 -->
                            <button class="btn btn-success" type="button">添加一级菜单</button>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

</div>

<script>
    var mod = angular.module('gg', []);
    mod.controller('ctrl', ['$scope', function ($scope) {
        $scope.data =  {
            "button":[
                {
                    "type":"click",
                    "name":"今日歌曲",
                    "key":"V1001_TODAY_MUSIC"

                },
                {
                    "name":"菜单",
                    "type":"view",
                    "sub_button":[
                        {
                            "type":"view",
                            "name":"搜索",
                            "url":"http://www.soso.com/"
                        },
                        {
                            "type":"miniprogram",
                            "name":"wxa",
                            "url":"http://mp.weixin.qq.com",
                            "appid":"wx286b93c14bbf93aa",
                            "pagepath":"pages/lunar/index"
                        },
                        {
                            "type":"click",
                            "name":"赞一下我们",
                            "key":"V1001_GOOD",
                            "url":"www.zan.com"
                        }]
                }
            ]
        }
    }])
</script>
</body>
</html>